<template>
	<el-radio-group v-model="fieldValue" v-bind="$attrs">
		<slot>
			<!-- 是否按钮样式 -->
			<template v-if="isButton">
				<el-radio-button :label="item.label" :value="item.value" v-for="item in options" :key="item.value" :disabled="item.disabled" />
			</template>
			<template v-else>
				<el-radio :label="item.label" :value="item.value" v-for="item in options" :key="item.value" :disabled="item.disabled" />
			</template>
		</slot>
	</el-radio-group>
</template>

<script setup name="MyRadio">
import { API_HOST } from '@/config';
import axios from '@u/axios';
import _camelCase from 'lodash/camelCase';
import { useVModel } from '@vueuse/core';

/***
 * 参数属性
 * @property {Number | String} modelValue 默认值
 * @property {Array} [list = []] 多选框数据
 * @property {Boolean} [isButton = false] 默认不展示按钮样式
 * @property {Object} fillType 数据格式默认为{ label: 'dictLabel', value: 'dictValue' }
 * @property {String} type store.dispatch的方法名,兼容'GETdeptTree'/'deptTree'/'dept_tree'三种方式
 * @property {String，Function} api 数据请求地址，默认请求为·GET·方式，支持传递url地址、api请求方法两种
 * @property {Boolean} original 是否保留原始数据，默认为false
 */
const props = defineProps({
	modelValue: {},
	list: {
		type: Array,
		default: () => []
	},
	isButton: {
		type: Boolean,
		default: false
	},
	fileType: {
		type: Object,
		default: () => ({ label: 'dictLabel', value: 'dictValue' })
	},
	type: {
		type: String
	},
	api: {
		type: [String, Function]
	},
	original: {
		type: Boolean,
		default: false
	}
});

const options = ref([]),
	emits = defineEmits(['update:modelValue']),
	fieldValue = useVModel(props, 'modelValue', emits),
	dictType = computed(() => _camelCase(props.type));

/**
 * 数据处理
 * @param {[]} data 原始数据
 * @param {} fileType 处理{ label: 'dictLabel', value: 'dictValue' }对象
 */
function fileTypeFn(data, fileType = props.fileType) {
	return data.map((val) => {
		const obj = {
			label: val[fileType.label],
			value: val[fileType.value],
			disabled: val[fileType.disabled] || false
		};
		if (props.original) {
			return {
				...obj,
				...val
			};
		} else {
			return obj;
		}
	});
}

function initialization(list = props.list) {
	options.value = fileTypeFn(list);
}
watch(
	() => props.list,
	(val) => {
		if (Array.isArray(val)) initialization(val);
	},
	{ deep: true, immediate: true }
);

watch(
	() => $store?.dict[dictType.value] || $store?.com[dictType.value],
	(val) => {
		if (dictType.value) initialization(val);
	},
	{ deep: true, immediate: true }
);

watch(
	() => props.api,
	(val) => {
		if (val) {
			if (typeof val === 'string') {
				axios({
					method: 'get',
					url: API_HOST + val
				}).then((res) => {
					initialization(res.data || []);
				});
			}
			if (typeof val === 'function') {
				val().then((res) => {
					initialization(res.data || []);
				});
			}
		}
	},
	{ immediate: true }
);

// 初始化执行逻辑
function initFn() {
	if (dictType.value) {
		if ($store.dict[dictType.value]) return $store.dict[`GET${dictType.value}`]();
		if ($store.com[dictType.value]) return $store.com[`GET${dictType.value}`]();
		throw new Error('字典数据未添加！');
	} else {
		initialization();
	}
}
watch(
	() => dictType.value,
	(val) => {
		if (val) initFn();
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped></style>
